<template>
  <div class="box column">
    <h4 class="caption">会议室利用率</h4>
    <div class="chart" ref="column"></div>
  </div>
</template>

<script>
var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
export default {
  mounted() {
   this.show()
  },
  methods: {
    show(){
      var columnChart=echarts.init(this.$refs.column)
      columnChart.setOption({
        xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', ]
        },
        yAxis: {
        type: 'log',
        },
        series: [{
        data: [70, 20, 10,],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: '#DADAF3'
        },
        color:'#5470C6'
        
        }]
      })
  },
  }
}
</script>

<style lang="scss" scoped>
.chart{
  width: 100%;
  height: 100%;
}
.column {
  width: 400px;
  height: 300px;
}
.box {
  border-radius: 20px;
  box-shadow: 4px 3px 7px 0px #00000036;
  letter-spacing: 5px;
  .caption {
    margin:5px 15px;
    font-size: 25px;
    font-weight: normal;
    color: #5E5E5E;
  }
}
</style>